<template>
    <div id="both">
        <nav>
            <div></div>
            <span>消息</span>
            <router-link to="/second/User">
                <span class="fa fa-user-o"></span>
            </router-link>
        </nav>
        <div id="all">
            <div id="box1">
                <div class="icon">
                    <span class="fa fa-commenting-o"></span>
                </div>
                <div class="message">
                    <span>留言</span>
                    <p>您还没有新的留言</p>
                </div>
            </div>
            <div id="box1">
                <div class="icon1">
                    <span class="fa fa-bullhorn"></span>
                </div>
                <div class="message">
                    <span>通知</span>
                    <span style="color:#999">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;1天前</span>
                    <p>我同事要被辞掉了，某东199元的Zippo...</p>
                </div>
            </div>
            <div id="box1">
                <div class="icon2">
                    <span class="fa fa-truck"></span>
                </div>
                <div class="message">
                    <span>交易提醒</span>
                    <p>您还没有任何交易提醒</p>
                </div>
            </div>
            <div id="box1">
                <div class="icon3">
                    <span class="fa fa-legal"></span>
                </div>
                <div class="message" style="border-bottom:none">
                    <span>侃价提醒</span>
                    <p>您还没有任何侃价提醒</p>
                </div>
            </div>
        </div>
        <div id="box">
            <div id="box2"> 
            <div class="icon4">
                    <span>猎趣</span>
                </div>
                <div class="message1">
                    <span>猎趣客户服务中心</span>
                    <span>官方</span>
                    <p>Hi，我是您的智能助理小猎，想问什么尽管</p>
                </div> 
            </div>
        </div>
        
        <Tabbar></Tabbar>
    </div>
</template>

<script>
import Tabbar from '@/components/Tabbar.vue'
export default{
    data:function(){
        return{

        }
    },
    components:{
        Tabbar
    }
}
</script>

<style scoped>
    a{
        color: white;
    }
    #both{
        background-color: #eee;
        height: calc(100vh - 43px);
    }
    nav{
        display: flex;
        justify-content: space-between;
        height: 40px;
        line-height: 35px;
        background-color: red;
        color: white;
        padding: 0 10px;
    }
    .fa-user-o{
        margin-top: 10px;
        font-size: 19px;
    }
    #all{
        border-bottom: 1px solid #ddd;
        width: 100%;
        background-color: white;
    }
    #box1{
        display: flex;
        padding: 8px 0 8px 8px;
        width: 100%;
    }
    .icon,.icon1,.icon2,.icon3{
        width: 17%; 
    }
    .icon span{
        display: inline-block;
        font-size: 30px;
        padding: 6px 6px;
        border-radius: 50%;
        color: white;
        background-color: orange;
        margin-top: 6px;
    }
    .message{
        height: 60px;
        width: 83%;
        border-bottom: 1px solid #ddd;
    }
    .message span{
        display: inline-block;
        font-size: 14px;
        padding-top: 8px;
    }
    p{
        margin: 0;
        font-size: 14px;
        color: #999;
    }
    .icon1 span{
        display: inline-block;
        font-size: 30px;
        padding: 6px 6px;
        border-radius: 50%;
        color: white;
        background-color: green;
        margin-top: 6px;
    }
    .icon2 span{
        display: inline-block;
        font-size: 30px;
        padding: 6px 6px;
        border-radius: 50%;
        color: white;
        background-color: #1E90FF;
        margin-top: 6px;
    }
    .icon3 span{
        display: inline-block;
        font-size: 30px;
        padding: 6px 6px;
        border-radius: 50%;
        color: white;
        background-color: #5CACEE;
        margin-top: 6px;
    }
    #box{
        margin-top: 10px;
    }
    #box2{
        display: flex;
        width: 100%;
        padding: 8px 0 0 8px;
        border-top: 1px solid #ddd;
        background-color: white;
        height: 36vh;
    }
    .icon4{
        width: 17%;
    }
    .icon4 span{
        display: inline-block;
        font-size: 18px;
        margin-top: 8px;
        border: 1px solid red;
        padding: 6px 3px;
        border-radius: 50%;
        color: white;
        background-color: red;
    }
    .message1{
        border-bottom: 1px solid #ddd;
    }
    .message1 span{
        display: inline-block;
        font-size: 14px;
        margin-top: 8px;
    }
    .message1 span:nth-of-type(2){
        border: 1px solid red;
        padding: 0 4px;
        background-color: red;
        color: white;
        border-radius: 5px;
        margin-left: 5px;
    }
</style>